import styles from './index.less';
import { Menu, Row, Col, MenuProps } from 'antd';
import { AppstoreOutlined, SettingOutlined, DatabaseOutlined } from '@ant-design/icons';
import React, { useEffect, useState } from 'react';
import { useLocation, useRoutes, useNavigate, Outlet } from 'umi';

const IndexPage: React.FC<{ children: React.ReactNode, location: Location }> = (props) => {

  const items: MenuProps['items'] = [
    {
      label: '创建库表',
      key: '/',
      icon: <SettingOutlined />,
    },
    {
      label: '数据仓库',
      key: '/data',
      icon: <DatabaseOutlined />,
    },
  ];

  const [currenKey, setCurrentKey] = useState<string>('/');

  const location = useLocation();

  const navigate = useNavigate();

  useEffect(() => {
    setCurrentKey(location.pathname);
  }, []);

  function handleChangeKey(key: string) {
    navigate(key);
    setCurrentKey(key);
  }


  return (
    <div>
      <Row>
        <Col span={2}></Col>

        <Col span={20}>
          <Row>
            <Col span={2}>
              <div className={styles.title}>
                微数据
              </div>
            </Col>
            <Col span={20}>
              <Menu selectedKeys={[currenKey]} onClick={({ key }) => handleChangeKey(key)} style={{ height: '60px', lineHeight: '60px' }} mode="horizontal" items={items}>

              </Menu>
            </Col>
          </Row>
        </Col>
        <Col span={2}></Col>
      </Row >
      <Row>
        <Col span={2}></Col>
        <Col span={20}>
          <Outlet />
        </Col>
        <Col span={2}></Col>
      </Row>
    </div >
  );
}

export default IndexPage
